<template>
  <div class="home" ref="home">
    <dv-full-screen-container>
      <div class="header">
        <Headerv title="疫情监控" />
      </div>
      <div class="content">
        <div class="show">
          <div class="map">
            <dv-border-box-1>
              <div class="mapmain">
                <div v-if="mapChina.length === 0">
                  <dv-loading>Loading...</dv-loading>
                </div>
                <div class="mapwrap" v-if="mapChina.length !== 0">
                  <swiper
                    class="swiper"
                    ref="mySwiper"
                    :options="swiperOptions"
                  >
                    <swiper-slide>
                      <MapWorld
                        v-if="mapWorld.length !== 0"
                        :mapWorld="mapWorld"
                      />
                    </swiper-slide>
                    <swiper-slide>
                      <MapChina
                        v-if="mapChina.length !== 0"
                        :mapChina="mapChina"
                      />
                    </swiper-slide>

                    <div class="swiper-pagination" slot="pagination"></div>
                  </swiper>
                </div>
              </div>
            </dv-border-box-1>
          </div>
          <div class="rank">
            <dv-border-box-8>
              <div class="rank-wrap">
                <div class="rank-item">
                  <Rank
                    v-if="mapWorld.length !== 0"
                    :rankData="mapWorld"
                    title="国家"
                  ></Rank>
                </div>
                <div class="rank-item">
                  <Rank
                    v-if="mapChina.length !== 0"
                    :rankData="mapChina"
                    title="地区"
                  ></Rank>
                </div>
              </div>
            </dv-border-box-8>
          </div>
        </div>
        <div class="info">
          <div class="overview">
            <dv-border-box-10>
              <Overview
                v-if="overAll && overAll.generalRemark"
                :overAll="overAll"
              ></Overview>
            </dv-border-box-10>
          </div>
          <div class="news">
            <dv-border-box-10>
              <News
                v-if="newsAll && newsAll.length > 0"
                :newsAll="newsAll"
              ></News>
            </dv-border-box-10>
          </div>
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
// @ is an alias to /src
import { Swiper, SwiperSlide, directive } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
import Headerv from "@/components/Headerv.vue";
import MapWorld from "@/components/MapWorld.vue";
import MapChina from "@/components/MapChina.vue";
import Rank from "@/components/Rank.vue";
import Overview from "@/components/Overview.vue";
import News from "@/components/News.vue";
import { default as service } from "@/api/main.js";
import { get, sortBy, concat } from "lodash";

export default {
  name: "Home",
  data() {
    return {
      overAll: {}, // 概览
      newsAll: [], // 新闻信息
      mapAll: [], // 世界国家和省份的总数据
      mapChina: [], // 中国数据
      mapWorld: [], // 世界数据
      swiperOptions: {
        pagination: {
          el: ".swiper-pagination",
          clickable: true
        }
      }
    };
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.$swiper;
    }
  },
  components: {
    Swiper,
    SwiperSlide,
    Headerv,
    MapChina,
    MapWorld,
    Rank,
    Overview,
    News
  },
  directives: {
    swiper: directive
  },
  created() {
    this.fetchOverAll();
    setTimeout(() => {
      this.fetchNewsAll();
    }, 1000);
    setTimeout(() => {
      this.fetchMapAll();
    }, 2000);
  },
  mounted() {
    this.initSwiper();
  },
  methods: {
    initSwiper() {
      document.onkeydown = e => {
        let key = e.keyCode;
        switch (key) {
          case 37:
            this.swiper.slideTo(0, 1000, false);
            break;
          case 39:
            this.swiper.slideTo(1, 1000, false);
            break;
          default:
            break;
        }
      };
    },
    fetchOverAll() {
      // 概览
      service.overAll().then(res => {
        if (res.success) {
          this.overAll = get(res, "results[0]");
        }
      });
    },
    fetchNewsAll() {
      // 概览
      service.newsAll().then(res => {
        if (res.success) {
          this.newsAll = get(res, "results");
        }
      });
    },
    fetchMapAll() {
      service.mapAll().then(res => {
        if (res.success) {
          this.mapAll = get(res, "results");
          this.formatChinaData(this.mapAll);
          this.formatWorldData(this.mapAll);
        }
      });
    },
    formatWorldData(mapAll) {
      const mapWorld = sortBy(
        concat(
          mapAll.filter(value => {
            return value.countryName !== "中国";
          }),
          mapAll.filter(value => {
            return (
              value.countryName === "中国" && value.provinceName === "中国"
            );
          })
        ),
        item => {
          return -item.confirmedCount;
        }
      );

      // 加字段
      this.mapWorld = mapWorld.map(value => {
        value.name = value.countryName;
        value.value = value.confirmedCount;
        return value;
      });
    },
    formatChinaData(mapAll) {
      // 过滤
      const mapChina = sortBy(
        mapAll.filter(value => {
          return value.countryName === "中国" && value.provinceName !== "中国";
        }),
        item => {
          return -item.confirmedCount;
        }
      );
      // 加字段
      this.mapChina = mapChina.map(value => {
        value.name = value.provinceShortName;
        value.value = value.confirmedCount;
        return value;
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.home /deep/ .swiper-pagination-bullet {
  background-color: #ffffff !important;
}
.home {
  width: 100%;
  height: 100%;
  overflow: hidden;

  .header {
    height: 7%;
  }

  .content {
    height: 93%;
    display: flex;
    .show {
      flex: 4;
      .map {
        height: 65%;
        .mapmain {
          width: 100%;
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          position: relative;
          overflow: hidden;
          .mapwrap {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            .swiper {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
      .rank {
        height: 35%;
        .rank-wrap {
          display: flex;
          height: 100%;
          .rank-item {
            flex: 1;
            height: 100%;
            padding: 20px;
            box-sizing: border-box;
          }
        }
      }
    }
    .info {
      flex: 1;
      padding: 10px 10px 0px;
      box-sizing: border-box;
      .overview {
        height: 50%;
        padding-bottom: 4%;
        box-sizing: border-box;
      }
      .news {
        height: 50%;
      }
    }
  }
}
</style>
